<template>
<div  style="-webkit-overflow-scrolling: touch;">
  <div id="canvas" v-if="showPanal" :style="canvasStyle">
    <div v-for="(item, index) in viewData"
      :key="index" :style="chartStyle(item)" v-show="item.isShow == true">
        <bar-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-if="item.chartType == 'bar' && item.isShow == true"/>
        <line-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'line' && item.isShow == true"/>
        <scatter-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'scatter' && item.isShow == true"/>
        <double-bar-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'doublebar' && item.isShow == true"/>
        <staggered-label-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'staggeredLabel' && item.isShow == true"/>
        <cylinder-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'cylinder' && item.isShow == true"/> 
        <top-bar-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'topbar' && item.isShow == true"/> 
        <rate-bar-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'rateBar' && item.isShow == true"/> 
        <paralle-bar-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'parallebar' && item.isShow == true"/>
        <doubley-axis-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'doubleyAxis' && item.isShow == true"/>
        <double-direction-bar-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'doubleDirectionBar' && item.isShow == true"/>
        <double-bar-time-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'doublebartime' && item.isShow == true"/>              
        <single-column-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'singleColumn' && item.isShow == true"/>       
        <three-d-bar-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'threeDBar' && item.isShow == true"/> 
        <pie-line-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'pieline' && item.isShow == true"/>
        <bar-pie-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'barPie' && item.isShow == true"/>
        <line-bar-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'linebar' && item.isShow == true"/>
        <map-bar-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" :customId="item.customId" v-else-if="item.chartType == 'mapbar' && item.isShow == true"/>
        <normal-text :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" v-else-if="item.chartType == 'text' && item.isShow == true"/>
        <lamp-text :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :customId="item.customId" v-else-if="item.chartType == 'lamp' && item.isShow == true"/>
        <date-text :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" v-else-if="item.chartType == 'date' && item.isShow == true"/>
        <image-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" v-else-if="item.chartType == 'img' && item.isShow == true"/>
        <q-rcode-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" v-else-if="item.chartType == 'qRcode' && item.isShow == true"/>
        <video-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :customId="item.customId" v-else-if="item.chartType == 'video' && item.isShow == true"/>
        <realtime-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :customId="item.customId" v-else-if="item.chartType == 'realtime' && item.isShow == true"/>
        <hyper-link-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :zIndex="item.zindex" v-else-if="item.chartType == 'hyperlink' && item.isShow == true"/>
        <iframe-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :zIndex="item.zindex" v-else-if="item.chartType == 'iframe' && item.isShow == true"/>
        <rotation-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :zIndex="item.zindex" v-else-if="item.chartType == 'rotation' && item.isShow == true"/>
        <word-cloud-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'wordcloud' && item.isShow == true"/>
        <color-block-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'colorBlock' && item.isShow == true"/>
        <twinkle-border-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" v-else-if="item.chartType == 'twinkleborder' && item.isShow == true"/>
        <around-border-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" v-else-if="item.chartType == 'aroundborder' && item.isShow == true"/>
        <ray-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" v-else-if="item.chartType == 'ray' && item.isShow == true"/>
        <midi-keyboard-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" v-else-if="item.chartType == 'midikeyboard' && item.isShow == true"/>      
        <voiceprint-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" v-else-if="item.chartType == 'voiceprint' && item.isShow == true"/>      
        <diffuseray-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" v-else-if="item.chartType == 'diffuseray' && item.isShow == true"/>        
        <table-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'taBle' && item.isShow == true"/>
        <table-rotation-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'tablerotation' && item.isShow == true"/>
        <table-top-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'tabletop' && item.isShow == true"/>
        <input-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'input' && item.isShow == true"/>
        <time-frame-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'timeframe' && item.isShow == true"/>
        <timeline-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'timeline' && item.isShow == true"/>        
        <cascade-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'cascade' && item.isShow == true"/>
        <tab-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'tab' && item.isShow == true"/>
        <stacked-bar-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'stackedBar' && item.isShow == true"/>
        <shadow-line-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'shadowLine' && item.isShow == true"/>
        <rain-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'rain' && item.isShow == true"/>
        <pie-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'pie' && item.isShow == true"/>
        <ring-pie-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'ringPie' && item.isShow == true"/>
        <funnel-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'funnel' && item.isShow == true"/>
        <radar-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'radar' && item.isShow == true"/>
        <gauge-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'gauge' && item.isShow == true"/>
        <keygauge-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'keygauge' && item.isShow == true"/>
        <progress-gauge-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'progauge' && item.isShow == true"/>       
        <select-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'select' && item.isShow == true"/>
        <map-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'map' && item.isShow == true"/>
        <map-line-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'mapline' && item.isShow == true"/>
        <map-more-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" v-else-if="item.chartType == 'mapMore' && item.isShow == true"/>
        <three-d-map-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'threedMap' && item.isShow == true"/>        
        <three-d-map-bar-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'threedMapBar' && item.isShow == true"/>        
        <backborder-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" v-else-if="item.chartType == 'backborder' && item.isShow == true"/>
        <water-ball-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'waterball' && item.isShow == true"/>
        <water-ball-line-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'waterballline' && item.isShow == true"/>
        <flop-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'flop' && item.isShow == true"/>
        <circle-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'circle' && item.isShow == true"/>
        <pie-more-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'piemore' && item.isShow == true"/>
        <progress-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'progress' && item.isShow == true"/>
        <knowledge-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'knowledge' && item.isShow == true"/>
        <pops-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'pops' && item.isShow == true"/>
        <sunburst-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'sunburst' && item.isShow == true"/>
        <text-check-box :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'textCheckBox' && item.isShow == true"/>
        <custom-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'customChart' && item.isShow == true"/>
        <custom-water-ball-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'customWaterBall' && item.isShow == true"/>
        <scanning-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" v-else-if="item.chartType == 'scanning' && item.isShow == true"/>
        <turntable-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" v-else-if="item.chartType == 'turntable' && item.isShow == true"/>
        <boxline-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'boxline' && item.isShow == true"/>
        <galaxy-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :customId="item.customId" v-else-if="item.chartType == 'galaxy' && item.isShow == true"/>
        <tian-di-map-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :customId="item.customId" v-else-if="item.chartType == 'tiandiMap' && item.isShow == true"/>
        <card-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'card' && item.isShow == true"/>
        <pictorial-bar-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'pictorialBar' && item.isShow == true"/>
        <sankey-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'sankey' && item.isShow == true"/>
        <heatMap-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'heatMap' && item.isShow == true"/>
        <tree-layout-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'relationGraph' && item.isShow == true"/>
        <custom-threeD-bar-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'CustomThreeDBar' && item.isShow == true"/>
        <interact-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'interact' && item.isShow == true" :pageState="'view'"/>
    
    </div>

    <drill-down-view :drillDownDialogFlag.sync="drillDownDialogFlag" :drillDownDialogData="drillDownDialogData"/>
    
      
    
  </div>
  <el-dialog  v-if="codeFlag" :visible.sync="codeFlag" width="600px" append-to-body :close-on-click-modal="false" >
            <div style="display:flex">
                
                  <label style="width:80px;line-height:40px;color:#fff;font-size:16px">提取码</label>
                
                  <el-input v-model="code" class="effectSpan" @keydown.enter.native="checkCode"></el-input>
                                
            </div>
       
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="checkCode">确认</el-button>
        </div>
      </el-dialog>
</div>
</template>

<script>

// 水印
import Watermark from './util/watermark'
import './animate/animate.css'
import VueEvent from '@/views/tool/datav/VueEvent'
import BarChart from './components/chart/BarChart'
import LineChart from './components/chart/LineChart'
import ScatterChart from './components/chart/ScatterChart'
import DoubleBarChart from './components/chart/DoubleBarChart'
import StaggeredLabelChart from './components/chart/StaggeredLabelChart'
import CylinderChart from './components/chart/CylinderChart'
import TopBarChart from './components/chart/TopBarChart'
import ParalleBarChart from './components/chart/ParalleBarChart'
import DoubleyAxisChart from './components/chart/DoubleyAxisChart'
import DoubleDirectionBarChart from './components/chart/DoubleDirectionBarChart'
import SingleColumnChart from './components/chart/SingleColumnChart'
import DoubleBarTimeChart from './components/chart/DoubleBarTimeChart'
import ThreeDBarChart from './components/chart/ThreeDBarChart'
import PieLineChart from './components/chart/PieLineChart'
import BarPieChart from './components/chart/BarPieChart'
import LineBarChart from './components/chart/LineBarChart'
import MapBarChart from './components/chart/MapBarChart'
import RateBarChart from './components/chart/RateBarChart'
import NormalText from './components/chart/NormalText'
import LampText from './components/chart/LampText'
import DateText from './components/chart/DateText'
import QRcodeChart from './components/chart/QRcodeChart'
import VideoChart from './components/chart/VideoChart'
import RealtimeChart from './components/chart/RealtimeChart'
import HyperLinkChart from './components/chart/HyperLinkChart'
import IframeChart from './components/chart/IframeChart'
import RotationChart from './components/chart/RotationChart'
import ColorBlockChart from './components/chart/ColorBlockChart'
import ImageChart from './components/chart/ImageChart'
import WordCloudChart from './components/chart/WordCloudChart'
import TableChart from './components/chart/TableChart'
import TableRotationChart from './components/chart/TableRotationChart'
import TableTopChart from './components/chart/TableTopChart'
import InputChart from './components/chart/InputChart'
import TimeFrameChart from './components/chart/TimeFrameChart'
import TimelineChart from './components/chart/TimelineChart'
import CascadeChart from './components/chart/CascadeChart'
import TabChart from './components/chart/TabChart'
import TwinkleBorderChart from '@/views/tool/datav/components/chart/TwinkleBorderChart'
import AroundBorderChart from '@/views/tool/datav/components/chart/AroundBorderChart'
import RayChart from '@/views/tool/datav/components/chart/RayChart'
import DiffuserayChart from '@/views/tool/datav/components/chart/DiffuserayChart'
import MidiKeyboardChart from '@/views/tool/datav/components/chart/MidiKeyboardChart'
import VoiceprintChart from '@/views/tool/datav/components/chart/VoiceprintChart'
import StackedBarChart from './components/chart/StackedBarChart'
import ShadowLineChart from './components/chart/ShadowLineChart'
import RainChart from './components/chart/RainChart'
import PieChart from './components/chart/PieChart'
import RingPieChart from './components/chart/RingPieChart'
import FunnelChart from './components/chart/FunnelChart'
import RadarChart from './components/chart/RadarChart'
import GaugeChart from './components/chart/GaugeChart'
import KeygaugeChart from './components/chart/KeygaugeChart'
import ProgressGaugeChart from './components/chart/ProgressGaugeChart'
import SelectChart from './components/chart/SelectChart'
import MapChart from './components/chart/MapChart'
import MapLineChart from './components/chart/MapLineChart'
import MapMoreChart from './components/chart/MapMoreChart'
import ThreeDMapChart from './components/chart/ThreeDMapChart'
import ThreeDMapBarChart from './components/chart/ThreeDMapBarChart'
import BackborderChart from './components/chart/BackborderChart'
import WaterBallChart from './components/chart/WaterBallChart'
import WaterBallLineChart from './components/chart/WaterBallLineChart'
import CircleChart from './components/chart/CircleChart'
import FlopChart from '@/views/tool/datav/components/chart/FlopChart'
import PieMoreChart from './components/chart/PieMoreChart'
import ProgressChart from './components/chart/ProgressChart'
import KnowledgeChart from './components/chart/KnowledgeChart'
import PopsChart from './components/chart/PopsChart'
import SunburstChart from './components/chart/SunburstChart'
import TextCheckBox from './components/chart/TextCheckBox'
import CustomChart from '@/views/tool/datav/components/chart/CustomChart'
import CustomWaterBallChart from './components/chart/CustomWaterBallChart'
import ScanningChart from '@/views/tool/datav/components/chart/ScanningChart'
import TurntableChart from '@/views/tool/datav/components/chart/TurntableChart'
import BoxlineChart from '@/views/tool/datav/components/chart/BoxlineChart'
import GalaxyChart from '@/views/tool/datav/components/chart/GalaxyChart'
import TianDiMapChart from '@/views/tool/datav/components/chart/TianDiMapChart'
import DrillDownView from './components/config/drillDown/drillDownView.vue'
import CardChart from '@/views/tool/datav/components/chart/CardChart.vue'
import PictorialBarChart from '@/views/tool/datav/components/chart/PictorialBarChart'
import CustomThreeDBarChart from '@/views/tool/datav/components/chart/CustomThreeDBarChart'
import SankeyChart from '@/views/tool/datav/components/chart/SankeyChart'
import { getScreen,getPage } from "@/api/tool/datav/screenApi";
import { getToken, setToken ,removeToken} from '@/utils/auth'
import TreeLayoutChart from '@/views/tool/datav/components/chart/TreeLayoutChart'
import HeatMapChart from '@/views/tool/datav/components/chart/HeatMapChart'
import InteractChart from '@/views/tool/datav/components/chart/InteractChart'

const WIDTH = 500 // refer to Bootstrap's responsive design
export default {
  components: {
    BarChart,
    LineChart,
    ScatterChart,
    DoubleBarChart,
    RateBarChart,
    NormalText,
    LampText,
    DateText,
    TableChart,
    TableRotationChart,
    TableTopChart,
    InputChart,
    TimeFrameChart,
    TimelineChart,
    CascadeChart,
    TabChart,
    StackedBarChart,
    StaggeredLabelChart,
    CylinderChart,
    TopBarChart,
    ParalleBarChart,
    DoubleyAxisChart,
    DoubleDirectionBarChart,
    SingleColumnChart,
    DoubleBarTimeChart,
    ThreeDBarChart,
    PieLineChart,
    BarPieChart,
    LineBarChart,
    MapBarChart,
    ImageChart,
    QRcodeChart,
    VideoChart,
    RealtimeChart,
    HyperLinkChart,
    IframeChart,
    RotationChart,
    ColorBlockChart,
    WordCloudChart,
    TwinkleBorderChart,
    AroundBorderChart,
    RayChart,
    DiffuserayChart,
    MidiKeyboardChart,
    VoiceprintChart,
    ShadowLineChart,
    RainChart,
    PieChart,
    RingPieChart,
    FunnelChart,
    RadarChart,
    GaugeChart,
    KeygaugeChart,
    ProgressGaugeChart,
    SelectChart,
    MapChart,
    MapLineChart,
    MapMoreChart,
    ThreeDMapChart,
    ThreeDMapBarChart,
    BackborderChart,
    WaterBallChart,
    WaterBallLineChart,
    CircleChart,
    FlopChart,
    PieMoreChart,
    ProgressChart,
    KnowledgeChart,
    PopsChart,
    SunburstChart,
    TextCheckBox,
    CustomChart,
    CustomWaterBallChart,
    ScanningChart,
    TurntableChart,
    BoxlineChart,
    GalaxyChart,
    TianDiMapChart,
    DrillDownView,
    CardChart,
    PictorialBarChart,
    CustomThreeDBarChart,
    SankeyChart,
    TreeLayoutChart,
    HeatMapChart,
    InteractChart,
  },
  data() {
    return {
      viewTheme: null,
      viewData: [],
      showPanal: false,
       //屏幕宽高
      screenWidth: document.body.offsetWidth,
      screenHeight: document.body.offsetHeight,
      basePath: process.env.VUE_APP_BASE_API,
      drillDownDialogFlag: false,
      drillDownDialogData: null,
      code : undefined,
      codeFlag: false,
      tokenStr: "",
      extractionNumber: "",
      isMobileFlag: false,
      screenId:"",
    }
  },
  // updated(){
  //   //清除loading
  //   this.$nextTick(() => {
  //     document.getElementById('appLoading').style.display = 'none';
  //   })
  // },
  created() {   
    //免登录token认证
    //console.log(getToken());
    //获取token
    let tokenId = this.$route.query.tokenId;
    this.screenId  = this.$route.query.screenId;

    if(tokenId != null && tokenId != undefined){
      removeToken();
      //参数有tokenid 必须输入验证码
      getPage(tokenId).then(response => {
          if(response.code == 200){
            this.tokenStr = response.data.tokenStr;
            this.extractionNumber = response.data.extractionNumber;
            //放入token
            if(!getToken()){
              setToken(this.tokenStr);
            }
            //验证提取码
            if(this.extractionNumber != null && this.extractionNumber != ' '){
              this.codeFlag = true;
            }else{
              this.initDatavRelease();
            }
          }
      });      
    }else{
      //参数没有tokenid并且有token 证明是已经登陆的用户 直接查看
      if(getToken()){
        this.initDatavRelease();
      }
    }
    
     VueEvent.$on('tabchange',function(chartList){
      if(chartList != null){
          //根据tab标签绑定组件设置组件的显示情况
          for(const obj of this.viewData){
            const chart =  chartList.filter(function (item) {
              return item.customId == obj.customId;
            })[0]

            if(chart != null){
              obj.isShow = chart.isShow;
              //obj.chartOption.animate = chart.animate;
            }
          }
      }          
    }.bind(this))

    //交互组件更新组件配置
    VueEvent.$on('interactChange',function(chartId,act){

        let index = this.viewData.findIndex(item => item.customId == chartId);

        if(index > -1){

          if(this.viewData[index].chartOption.interactData != undefined){
            let chartOption = JSON.parse(JSON.stringify(this.viewData[index].chartOption));
            chartOption.interactData = act;

          }
        
          this.$set(this.viewData[index].chartOption, 'interactData', act);
        }


    }.bind(this))


    //交互组件控制组件显隐
    VueEvent.$on('interactShow',function(chartId,act){

      
        let chart = this.viewData.find(item => item.customId == chartId);
        
        if(chart != null){

           if(act == 'show'){
 
            document.getElementById(chartId).style.visibility = 'visible'
           }else{

            document.getElementById(chartId).style.visibility = 'hidden'
           }
          
        }

    }.bind(this))
  
  },
  computed: {
    canvasStyle() {
      //let background = this.viewTheme.bgImage != '' ? `url(${this.viewTheme.bgImage}) no-repeat` : this.viewTheme.bgColor
      let background = this.viewTheme.bgImage != '' ? `url(${this.basePath + this.viewTheme.bgImage}) no-repeat` : this.viewTheme.bgColor
      
      if (this.isMobileFlag) {
        
        return {
          background: background,
          display:'flex',
          flexDirection:'column',
        }
      }else{
        return {
          width: this.viewTheme.isSelfAdaption?this.screenWidth+"px":this.viewTheme.panelWidth + "px",
          height: this.viewTheme.isSelfAdaption?this.screenHeight+"px":this.viewTheme.panelHeight + "px",
          background: background,
        };
      }
     
     
    },
  },
  mounted: function () {
    Watermark.set("FusionView");
    //监听下钻事件
    VueEvent.$on("drill_down_msg", data=>{
      this.drillDownDialogData = data;
      this.drillDownDialogFlag = true;
    })
    const isMobile = this.$_isMobile();
    if(isMobile){
      this.isMobileFlag = true;
    }

  },
  methods: {
    $_isMobile() {
      const rect = document.body.getBoundingClientRect()

      const mobile = this.isMobileDevice();
      
      return mobile  //rect.width - 1 < WIDTH
    },
    isMobileDevice() {//判断当前设备是否为移动端
      const ua = navigator.userAgent.toLowerCase();
      const t1 = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(
          ua
      );
      const t2 = !ua.match("iphone") && navigator.maxTouchPoints > 1;
      return t1 || t2;
    },
    chartStyle(val) {

      if(this.isMobileFlag){
        return {
          //transform: translate(val.x + "px", val.y + "px"),
          marginLeft: val.x + "px",
          marginTop: 7 + "px",
          marginBottom: 7 + "px",
          width: val.width + "px",
          height: val.height + "px",
          // position: 'absolute',
          'z-index': val.zindex
        }
      }else{

        return {
            //transform: translate(val.x + "px", val.y + "px"),
            left: val.x + "px",
            top: val.y + "px",
            width: val.width + "px",
            height: val.height + "px",
            position: 'absolute',
            'z-index': val.zindex
        }
      }
    },
    initDatavRelease() {
      //console.log("渲染组件")
      //this.loading = false
      let sId = this.screenId;

      if (sId != '' && sId != undefined) {
         getScreen(sId).then(response => {
          if(response.data != undefined){
            if(response.data.drawOption != undefined){
              let drawingList = JSON.parse(response.data.drawOption);
              this.viewTheme = JSON.parse(response.data.themeOption);
              this.showPanal = true;

              //是否自适应
              let isSelfAdaption = this.viewTheme.isSelfAdaption;
              //自适应类型
              let adaptionType = this.viewTheme.adaptionType;
              //获取编辑页宽高
              let rectWidth = this.viewTheme.panelWidth;
              let rectHeight = this.viewTheme.panelHeight;

              //是手机端页面
              if(this.isMobileFlag){

                //设置宽是屏幕宽度的90%
                //高度按原图比例
                drawingList.forEach(item => {
                  let originalWidth = item.width;
                  item.width = this.screenWidth * 0.95;

                  if(originalWidth < this.screenWidth){
                    
                    item.height = (item.height / originalWidth) * this.screenWidth * 0.95;
                  }
                  item.x = this.screenWidth * 0.025;
                  // item.y = (item.y/rectHeight) * this.screenHeight;
                });

              }else{

                //是自适应
                if(isSelfAdaption){
                  //全自适应
                  if(typeof adaptionType == 'undefined' || adaptionType == '0'){
                    //遍历组件重新计算自适应宽高
                    drawingList.forEach(item => {
                      item.width = (item.width/rectWidth) * this.screenWidth;
                      item.height = (item.height/rectHeight) * this.screenHeight;
                      item.x = (item.x/rectWidth) * this.screenWidth;
                      item.y = (item.y/rectHeight) * this.screenHeight;
                    });
                  }
                  //宽度自适应
                  else if(adaptionType == '1'){
                    //遍历组件重新计算自适应宽高
                    drawingList.forEach(item => {
                      item.width = (item.width/rectWidth) * this.screenWidth;
                      item.x = (item.x/rectWidth) * this.screenWidth;
                    });
                  }
                  //高度自适应
                  else if(adaptionType == '2'){
                    //遍历组件重新计算自适应宽高
                    drawingList.forEach(item => {
                      item.height = (item.height/rectHeight) * this.screenHeight;
                      item.y = (item.y/rectHeight) * this.screenHeight;
                    });
                  }
                  
                }
              }
              
              this.viewData = drawingList;
              this.$nextTick(() => {
                document.getElementById('appLoading').style.display = 'none';
              })
            }else{
              console.log("id====="+sId+"没有option",response.data)
              this.msgError("数据初始化失败!");
            }
          }else{
            console.log("id====="+sId+"没有data",response)
            this.msgError("数据接口错误!");
          }
          
        });
      }else{
        console.log("sId==="+sId)
        this.msgError("请刷新页面");
      }
    },
    checkCode(){
        if(this.extractionNumber == this.code){
          this.codeFlag = false;
          this.initDatavRelease();  
        } else{
          // this.msgError("您输入的提取码错误！")
        }     

    },
  },
};
</script>
<style scoped>
.el-dialog__wrapper{
  z-index: 9999999!important;
}
::v-deep .el-dialog {
  background: #172b47;
}
::v-deep .el-input--medium .el-input__inner {
    height: 36px;
    line-height: 36px;
    color: #FFFFFF;
    background-color: #ffffff00;
}
::v-deep .el-form-item--medium .el-form-item__label {
    line-height: 36px;
    color: #FFFFFF;
}
</style>
